<template>
    <div class="login">
        <input type="text" placeholder="请输入账号" v-model="username"><br><br><br>
        <input type="text" placeholder="请输入密码" v-model="pwd"><br><br><br>
        <button @click="login">登录</button>
    </div>
</template>

<script>
    export default {
        name:"Login",
        data(){
            return{
                username:"",
                pwd:""
            }
        },
        methods:{
            login(){
                //1. 验证数据 非空
                if(this.username.length === 0){
                    alert("账号不能为空！");
                    return;
                }

                //账号密码正则
                let Reg = /^[0-9,a-zA-Z]{6,12}$/;

                if(!Reg.test(this.username)){
                    alert("请输入正确的账号");
                    return;
                }


                if(this.pwd.length === 0){
                    alert("密码不能为空！");
                    return;
                }

                if(!Reg.test(this.pwd)){
                    alert("请输入正确的密码");
                    return;
                }


                //2. 向 后台发送请求
                // [1]  后台响应失败   404  500 
                // [2]  后台响应成功   200   

                // 3. 将数据  token 存入到 本地存储
                localStorage.setItem("token",this.username);

                // 4. 跳转

                if(this.$route.query.url){
                    this.$router.replace(this.$route.query.url);
                }else{
                    this.$router.replace("/home");
                }
                

            }
        }
    }
</script>

<style scoped>
.login{
  width: 300px;
  margin: 100px auto;
}
</style>